<!-- 业务主体组件 -->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="">
      <titleLine
        title="查询条件(点击可展开更多或收起)"
        :showV="true"
        :visible="formVisible"
        @changeVisible="changeVisible"
      ></titleLine>
      <a-form v-if="formVisible">
        <a-row :gutter="queryGutter">
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="任务名称"
                allowClear
                v-model="queryParam.jobName"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="目标字符串"
                allowClear
                v-model="queryParam.invokeTarget"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="表达式"
                allowClear
                v-model="queryParam.cronExpression"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <aSelectSingle
                placeholder="错误策略"
                v-model="queryParam.misfirePolicy"
                :source="$commonjs.misfirePolicy.source"
                allowClear
              ></aSelectSingle>
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <aSelectSingle
                placeholder="并发执行"
                v-model="queryParam.concurrent"
                :source="$commonjs.concurrent.source"
                allowClear
              ></aSelectSingle>
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <aSelectTorF
                placeholder="状态正常"
                v-model="queryParam.useStatus"
                allowClear
              ></aSelectTorF>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <div class="search-button">
            <a-button
              type="primary"
              icon="search"
              class="ml10"
              @click="getDataList(true)"
            >
              查询
            </a-button>
            <a-button class="ml10" type="primary" @click="reset">重置</a-button>
          </div></a-row
        >
      </a-form>
    </div>
    <!-- 表格区域 -->
    <div class="">
      <dynamicTableColumn
        :column="columns"
        @changeTableHeader="changeTableHeader"
        @raverseTableHead="dynamicColumn = columns"
        @resumeDefault="dynamicColumn = columns"
      >
        <aButtonPermission
          icon="plus"
          slot="button"
          @buttonEvent="add"
          labelName="添加"
          buttonCode="job_add"
        >
        </aButtonPermission>
        <aButtonPermission
          icon="calculator"
          slot="button"
          type="dashed"
          @buttonEvent="log"
          labelName="日志"
          buttonCode="job_add"
        >
        </aButtonPermission>
      </dynamicTableColumn>
      <a-table
        :columns="dynamicColumn"
        :data-source="dataSource"
        class=""
        rowKey="id"
        :pagination="false"
        :scroll="{ x: 500, y: 800 }"
        :loading="tableLoading"
        :indentSize="30"
      >
        <span slot="useStatus" slot-scope="text, record">
          <a-tag color="blue" v-if="record.useStatus === 0">启用</a-tag>
          <a-tag v-if="record.useStatus === 1">禁用</a-tag>
        </span>
        <span slot="misfirePolicy" slot-scope="text, record">
          <aTags
            v-model="record.misfirePolicy"
            :source="$commonjs.misfirePolicy.source"
          ></aTags>
        </span>
        <span slot="concurrent" slot-scope="text, record">
          <aTags
            v-model="record.concurrent"
            :source="$commonjs.concurrent.source"
          ></aTags>
        </span>
        <span slot="action" slot-scope="record">
          <aLinkPermission
            labelName="编辑"
            buttonCode="job_update"
            @buttonEvent="edit(record)"
          ></aLinkPermission>
          <a-popconfirm
            title="确认暂停任务吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="pause(record)"
          >
            <aLinkPermission
              labelName="暂停"
              buttonCode="job_update"
              v-if="record.useStatus === 0"
            ></aLinkPermission>
          </a-popconfirm>
          <a-popconfirm
            title="确认恢复任务吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="resume(record)"
            v-if="record.useStatus === 1"
          >
            <aLinkPermission
              labelName="恢复"
              buttonCode="job_update"
            ></aLinkPermission>
          </a-popconfirm>
          <a-popconfirm
            title="确认执行一次任务吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="run(record)"
          >
            <aLinkPermission
              labelName="执行"
              buttonCode="job_update"
            ></aLinkPermission>
          </a-popconfirm>
          <a-popconfirm
            title="确认删除吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="del(record)"
            ><aLinkPermission
              labelName="删除"
              buttonCode="job_delete"
            ></aLinkPermission>
          </a-popconfirm>
        </span>
      </a-table>
      <pagination
        class="pagination"
        :pagination="ipagination"
        @paginationChange="paginationChange"
        @paginationShowSizeChange="paginationShowSizeChange"
      ></pagination>
    </div>
    <!-- 数据操作组件 -->
    <Modal @handleOk="handleOk" ref="Model"></Modal>
  </a-card>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import { Mixins } from "@/mixins/list";
import { columns } from "./component/save";
import Modal from "./component/Model";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {
    Modal,
  },
  mixins: [Mixins],
  data() {
    //这里存放数据
    return {
      api: {
        dataList: "/job_server/job/page", // 分页
        delete: "/job_server/job/delete", // 删除
        changeStatus: "/job_server/job/changeStatus",
        run: "/job_server/job/run",
      },
      columns, // 列表列
      dynamicColumn: [], // 动态列对象
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    log() {
      this.$router.push("/sys/joblog");
    },
    async run(record) {
      const { success } = await this.$request.get1(this.api.run, {
        id: record.id,
      });
      if (success) {
        this.$message.success("执行成功");
        this.getDataList();
      }
    },
    async resume(record) {
      const { success } = await this.$request.get1(this.api.changeStatus, {
        id: record.id,
      });
      if (success) {
        this.$message.success("已恢复");
        this.getDataList();
      }
    },
    async pause(record) {
      const { success } = await this.$request.get1(this.api.changeStatus, {
        id: record.id,
      });
      if (success) {
        this.$message.success("暂停成功");
        this.getDataList();
      }
    },
    changeTableHeader(data) {
      this.dynamicColumn = data;
    },
    changeVisible(visible) {
      this.formVisible = visible;
    },
    handleOk() {
      this.$refs.Model.close();
      this.getDataList();
    },
    async del(record) {
      const { success } = await this.$request.get1(this.api.delete, {
        id: record.id,
      });
      if (success) {
        this.$message.success("删除成功");
        this.getDataList();
      }
    },
    edit(record) {
      this.$refs.Model.init(record.id, "更新数据");
    },
    add() {
      this.$refs.Model.init("", "添加数据");
    },
    async getDataList(isResetPage) {
      this.tableLoading = true;
      const params = this.getQueryParams(isResetPage); // 查询条件
      const { success, result } = await this.$request.get1(
        this.api.dataList,
        params
      );
      if (success) {
        this.dataSource = result.records;
        this.ipagination.total = result.total;
      }
      this.tableLoading = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 0 !important;
}
</style>